<script>
import { Card } from 'element-ui'
export default {
  name: 'FoldableCard',
  props: Card.props,
  data: () => ({ show: true, defaultHide: true }),
  render(h) {
    const renderCard = ({ onClick = () => {}, text, children = [] }) => {
      const { $props, header } = this
      return h('el-card', { props: $props, class: `foldable-card ${this.defaultHide || !this.show ? 'hide' : ''}` }, [
        h('strong', { slot: 'header' }, header),
        h('el-button', { props: { type: 'text' }, slot: 'header', on: { click: onClick } }, text),
        ...children
      ])
    }

    if (this.defaultHide) {
      return renderCard({
        onClick: () => {
          this.defaultHide = false
        },
        text: '展开'
      })
    }

    return renderCard({
      onClick: () => (this.show = !this.show),
      text: this.show ? '收起' : '展开',
      children: this.$slots.default
    })
  }
}
</script>

<style lang="scss">
.foldable-card {
  margin-top:20px;
  .el-card__header {
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.hide .el-card__body {
  display: none;
}
</style>
